<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传与进度</title>
    <script src="js/jQuery3.6.1.js"></script>
</head>
<body>
<h3>文件上传页面</h3>
<div class="modal-body form">
    <!-- 文件上传 -->
    <form id="dialogForm" class="form-horizontal">
        <div class="form-group">
            <div>
                <input type="file" id="fileUpload" multiple>
                <button type="button" onclick="upload()">上传文件</button> <!-- 新增的上传按钮 -->
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="control-label">上传进度:</label>
            <div>
                <!-- 进度条 -->
                <div id="progress-body">
                    <progress></progress>
                    <div id="progress-bar">0%</div>
                </div>
            </div>
        </div>
    </form>
    <br>
    <a href="download.html" id="a">下载文件</a>
    <!-- 显示文件列表 -->
    <ul id="file-list"></ul>
</div>

<script>
    // 刷新文件列表
    function refreshFileList() {
        fetch('/file/list')
            .then(response => response.json())
            .then(data => {
                displayFileList(data);
            })
            .catch(error => {
                console.error('Error fetching file list:', error);
            });
    }

    // 显示文件列表
    function displayFileList(fileList) {
        const fileListContainer = document.getElementById('file-list');
        fileListContainer.innerHTML = ''; // 清空列表

        fileList.forEach(file => {
            const listItem = document.createElement('li');
            listItem.textContent = file;
            fileListContainer.appendChild(listItem);
        });
    }

    // 文件上传
    function upload() {
        var fileUpload = document.getElementById("fileUpload");
        var files = fileUpload.files;

        var formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append("files", files[i])
        }

        $.ajax({
            url : "/file/upload",
            type : "POST",
            data : formData,
            processData : false,
            contentType : false,
            success : function(data) {
                console.log(data);
                // 刷新文件列表
                refreshFileList();

                // 延迟150毫秒后显示上传完成提示框
                setTimeout(() => {
                    alert("上传完成");
                    // 重置进度条和文件名
                    resetProgressBar();
                    // location.reload(); // 刷新页面
                }, 150);
            },
            xhr : function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    // 处理进度条的事件
                    xhr.upload.addEventListener("progress", progressHandle, false);
                    // 加载出错的事件
                    xhr.addEventListener("error", uploadFail, false);
                    return xhr;
                }
            }
        });
    }

    // 进度条更新
    function progressHandle(e) {
        $('#progress-body progress').attr({
            value : e.loaded,
            max : e.total
        });
        var percent = (e.loaded / e.total * 100).toFixed(2);
        $('#progress-body #progress-bar').html(percent + "%");
    }

    // 上传出错处理函数
    function uploadFail(e) {
        alert("上传失败");
    }

    // 重置进度条和文件名
    function resetProgressBar() {
        $('#progress-body progress').attr({
            value : 0,
            max : 100
        });
        $('#progress-body #progress-bar').html("0%");
        document.getElementById('file').value = ''; // 清空文件选择
    }

    // 页面加载时刷新文件列表
    document.addEventListener("DOMContentLoaded", function () {
        refreshFileList();
    });

</script>
</body>
</html>
